<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { useUserStore } from "@/stores/modules/user";
import { useDashboardStore } from "@/stores/modules/dashboard.ts";
import StatCard from "@/components/ui/home/StatCard.vue";
import LineChart from "@/components/ui/home/LineChart.vue";
import PieChart from "@/components/ui/home/PieChart.vue";
import ActivityList from "@/components/ui/home/ActivityList.vue";
import QuickActions from "@/components/ui/home/QuickActions.vue";

const userStore = useUserStore();
const dashboardStore = useDashboardStore();
// 加载状态
const loading = reactive({
  stat: false,
  chart: false,
  activity: false,
});

// 数据概览卡片
const statCards = ref([
  {
    title: "用户总数",
    value: 0,
    icon: "User",
    color: "#409EFF",
    unit: "人",
    trend: "up",
  },
  {
    title: "订单数量",
    value: 0,
    icon: "ShoppingCart",
    color: "#67C23A",
    unit: "笔",
    trend: "up",
  },
  {
    title: "销售额",
    value: 0,
    icon: "Money",
    color: "#E6A23C",
    unit: "元",
    trend: "down",
  },
  {
    title: "待办事项",
    value: 0,
    icon: "List",
    color: "#F56C6C",
    unit: "项",
    trend: "stable",
  },
]);

// 图表数据
const visitData = ref<Array<{ date: string; count: number }>>([]);
const sourceData = ref<Array<{ name: string; value: number }>>([]);

// 活动数据
const activities = ref<
  Array<{
    id: number;
    user: string;
    action: string;
    time: string;
  }>
>([]);

// 获取仪表盘数据
const fetchDashboardData = async () => {
  try {
    loading.stat = true;
    loading.chart = true;
    loading.activity = true;

    // 并发获取所有数据
    const [stats, charts, logs] = await Promise.all([
      dashboardStore.getStats(),
      dashboardStore.getCharts(),
      dashboardStore.getActivities(),
    ]);

    // 更新数据卡片
    statCards.value = [
      { ...statCards.value[0], value: stats.userCount },
      { ...statCards.value[1], value: stats.orderCount },
      { ...statCards.value[2], value: stats.salesAmount },
      { ...statCards.value[3], value: stats.todoCount },
    ];

    // 更新图表数据
    visitData.value = charts.visitTrend;
    sourceData.value = charts.userSource;

    // 更新活动数据
    activities.value = logs;
  } catch (error) {
    console.error("获取仪表盘数据失败:", error);
  } finally {
    loading.stat = false;
    loading.chart = false;
    loading.activity = false;
  }
};

// 处理快捷操作
const handleQuickAction = (action: string) => {
  switch (action) {
    case "refresh":
      //   fetchDashboardData()
      break;
    case "clearCache":
      // 清理缓存逻辑
      break;
    case "settings":
      // 跳转到设置页面
      break;
  }
};
// 初始化加载数据
onMounted(() => {
  fetchDashboardData();
});
</script>
<template>
  <div class="home-container">
    <!-- 欢迎栏 -->
    <el-card shadow="hover" class="welcome-card">
      <div class="flex items-center">
        <el-avatar
          :size="60"
          :src="userStore?.userInfo?.avatar"
          class="cursor-pointer"
        />
        <div class="ml-4">
          <h2>早安，{{ userStore?.userInfo?.username }}，祝您开心每一天！</h2>
          <p class="text-gray-500 mt-1">今日晴，15℃ - 25℃，天气晴朗，适合外出活动</p>
        </div>
      </div>
    </el-card>
    <!-- 数据概览卡片 -->
    <el-row :gutter="20" class="mt-4">
      <el-col
        v-for="item in statCards"
        :key="item.title"
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
      >
        <stat-card
          :title="item.title"
          :value="item.value"
          :icon="item.icon"
          :color="item.color"
          :loading="loading.stat"
          :unit="item.unit"
          :trend="item.trend"
        />
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="mt-4">
      <el-col :xs="24" :lg="8">
        <el-card shadow="hover" header="访问趋势">
          <line-chart :data="visitData" :loading="loading.chart" height="300px" />
        </el-card>
      </el-col>
      <el-col :xs="24" :lg="8">
        <el-card shadow="hover" header="用户来源">
          <pie-chart :data="sourceData" :loading="loading.chart" height="300px" />
        </el-card>
      </el-col>
      <el-col :xs="24" :lg="8">
        <el-card shadow="hover" header="代办事项">
          <line-chart :data="visitData" :loading="loading.chart" height="300px" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 底部区域 -->
    <el-row :gutter="20" class="mt-4">
      <el-col :xs="24" :lg="16">
        <el-card shadow="hover" header="最近活动">
          <activity-list :data="activities" :loading="loading.activity" />
        </el-card>
      </el-col>
      <el-col :xs="24" :lg="8">
        <el-card shadow="hover" header="快捷操作">
          <quick-actions @action="handleQuickAction" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.home-container {
  .welcome-card {
    background: linear-gradient(135deg, #f6f8ff 0%, #eef1ff 100%);
    border: none;

    h2 {
      font-size: 18px;
      font-weight: 500;
      margin: 0;
    }
  }

  .mt-4 {
    margin-top: 1rem;
  }
  :deep(.el-card) {
    background-color: var(--primary-light-color);
    border: var(--border-color-base) solid 1px !important;
  }
  :deep(.el-card__body) {
    background-color: var(--primary-light-color);
  }
  :deep(.el-card__header) {
    font-weight: bold;
    padding: 12px 20px;
    border-bottom: var(--border-color-base) solid 1px !important;
    color: var(--text-color-primary) !important;
  }
}
</style>
